<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            line-height: 1.6;
        }

        header, footer {
            background: #35424a;
            color: #ffffff;
            text-align: center;
            padding: 20px 0;
        }

        nav {
            background-color: #35424a;
            padding: 15px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 1500px;
            margin: auto;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #ffcc00;
        }

        nav form {
            display: flex;
            align-items: center;
            margin-left: 20px;
        }

        nav input[type="text"] {
            padding: 8px;
            border: none;
            border-radius: 3px;
            margin-right: 10px;
            width: 600px;
        }

        nav input[type="submit"] {
            padding: 8px 12px;
            background-color: #ffcc00;
            border: none;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
        }

        nav input[type="submit"]:hover {
            background-color: #e0b800;
        }

        .container {
            display: flex;
            justify-content: center;
            width: 80%;
            margin: auto;
        }

        .main-content {
            flex: 3;
            margin-right: 20px;
        }

        article {
            background: #ffffff;
            border: 1px solid #ddd;
            margin: 20px 0;
            padding: 20px;
            border-radius: 5px;
            transition: box-shadow 0.3s;
        }

        article:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        aside {
            background: #ffffff;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
            flex-basis: 200px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h2, h3 {
            color: #333;
            margin-top: 0;
        }

        .meta {
            font-size: 0.85em;
            color: #777;
            margin: 10px 0;
        }

        footer {
            padding: 30px;
            text-align: center;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .pagination a {
            margin: 0 5px;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 3px;
            text-decoration: none;
            color: #35424a;
        }

        .pagination a:hover {
            background-color: #f4f4f4;
        }

        .pagination .current {
            margin: 0 5px;
            padding: 8px 12px;
            border: 1px solid #35424a;
            border-radius: 3px;
            color: #ffffff;
            background-color: #35424a;
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .tag-cloud a {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-decoration: none;
            color: #333;
            background-color: #f2f2f2;
            transition: background-color 0.3s, transform 0.3s;
        }

        .tag-cloud a:hover {
            background-color: #e0e0e0;
            transform: scale(1.05);
        }

        aside h2, aside h3 {
            color: #35424a;
            margin-top: 0;
            border-bottom: 2px solid #f4f4f4;
            padding-bottom: 5px;
        }

        aside ul {
            list-style-type: none;
            padding: 0;
        }

        aside ul li {
            margin: 10px 0;
        }

        aside ul li a {
            text-decoration: none;
            color: #35424a;
            padding: 5px 10px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }

        aside ul li a:hover {
            background-color: #e0e0e0;
        }

        .user-container {
            display: flex;
            align-items: center;
        }

        .username {
            color: #ffffff;
            font-weight: bold;
            margin-right: 50px;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }

            .main-content {
                margin-right: 0;
                width: 100%;
            }

            aside {
                width: 100%;
                margin-top: 20px;
            }

            nav ul {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的博客</h1>
</header>

<nav>
    <ul>
        <li><a href="/article">首页</a></li>
        <li><a href="javascript:void(0);" onclick="redirectToUserPage()">个人</a></li>
        <li><a href="/admin">CMS</a></li>
        <div style="position: absolute; left: 50%; transform: translateX(-50%);">
            <li style="display: inline;">
                <form action="/search/" method="get">
                    <input type="text" name="query" placeholder="搜索文章标题/作者/类型" required>
                    <input type="submit" value="搜索">
                </form>
            </li>
        </div>
        <div style="margin-left: auto;">
            {% if user.is_authenticated %}
                <li class="user-container">
                    <img src="{{ user_info.head_img.url }}" alt="用户头像"
                         style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;">
                    <span class="username">{{ user.username }}</span>
                    <a href="/logout">退出</a>
                </li>
            {% else %}
                <li><a href="/login">登录</a></li>
            {% endif %}
        </div>
    </ul>
</nav>

<main class="container">
    <div class="main-content">
        <h2 style="margin-top: 20px;">首页</h2>
        {% if articles %}
            {% for article in articles %}
                <article>
                    <h2>{{ article.title }}</h2>
                    <p class="meta">作者: {{ article.author }} | 发布时间: {{ article.create_time }} |
                        分类：{{ article.classifier }} | 标签：{% for tag in article.tag.all %}{{ tag.name }}
                            {% if not forloop.last %}, {% endif %}{% endfor %}</p>
                    <p>{{ article.excerpt }}{% if article.excerpt|length > 100 %}...{% endif %}</p>
                    <a href="/detail/{{ article.id }}">阅读全文</a>
                </article>
            {% endfor %}

            <div class="pagination">
                <span class="step-links">
                    {% if articles.has_previous %}
                        <a onclick="url_tag_join('page=1')">&laquo; 首页</a>
                        <a onclick="url_tag_join('page={{ articles.previous_page_number }}')">前一页</a>
                    {% endif %}

                    {% for i in articles.paginator.page_range %}
                        {% if i == articles.number %}
                            <span class="current">{{ i }}</span>
                        {% else %}
                            <a onclick="url_tag_join('page={{ i }}')">{{ i }}</a>
                        {% endif %}
                    {% endfor %}

                    {% if articles.has_next %}
                        <a onclick="url_tag_join('page={{ articles.next_page_number }}')">>下一页</a>
                        <a onclick="url_tag_join('page={{ articles.paginator.num_pages }}')">末页 &raquo;</a>
                    {% endif %}
                </span>
            </div>
        {% else %}
            <p>暂无文章</p>
        {% endif %}
    </div>
    {% load custom_filters %}
    <aside>
        <h2>筛选选项</h2>
        <h3>归档</h3>
        <ul>
            <li><a id="2024-10" onclick="url_tag_join('2024-10')">📅 2024 年 10 月</a></li>
            <li><a id="2024-09" onclick="url_tag_join('2024-09')">📅 2024 年 09 月</a></li>
            <li><a id="2024-08" onclick="url_tag_join('2024-08')">📅 2024 年 08 月</a></li>
            <li><a id="2024-07" onclick="url_tag_join('2024-07')">📅 2024 年 07 月</a></li>
        </ul>
        <h3>分类</h3>
        <ul>
            {% for item in classes %}
                {% with count=classes_with_counts|get_item:item %}
                    <li><a id="{{ item.name }}"
                           onclick="url_tag_join('{{ item.name }}')">{{ item.name }}({{ count|default:0 }})</a></li>
                {% endwith %}
            {% endfor %}
        </ul>
        <h3>标签云</h3>
        <div class="tag-cloud">
            {% for tag in tags %}
                <a id="{{ tag.name }}" onclick="url_tag_join('{{ tag.name }}')">{{ tag.name }}</a>
            {% endfor %}
        </div>
    </aside>
</main>

<footer>
    <p>&copy; 2024 我的博客. 保留所有权利.</p>
</footer>

<script>
    const ids = {{ tag_type|safe }};
    ids.forEach(function (id) {
        const element = document.getElementById(id);
        if (element) {
            element.style.backgroundColor = '#e0e0e0';
            element.style.color = 'black';
        }
    });

    function url_tag_join(url_tag) {
        let url = decodeURIComponent(window.location.href);
        if (url_tag.includes('page=')) {
            if (url.includes('page=')) {
                url = url.replace(/page=\d+/, url_tag);
            } else {
                url = url_join(url, url_tag);
            }
            window.location.href = url;
            return;
        }
        if (url.includes('/' + url_tag + '_')) {
            url_tag = url_tag + '_'
            url = url.replace(url_tag, '');
        } else if (url.includes('_' + url_tag)) {
            url_tag = '_' + url_tag
            url = url.replace(url_tag, '');
        } else if (url.includes(url_tag)) {
            url_tag = '/' + url_tag
            url = url.replace(url_tag, '');
        } else {
            url = url_join(url, url_tag);
        }
        {#alert(url);#}
        if (url.includes('page=')) {
            url = url.replace(/page=\d+/, 'page=1');
        }
        window.location.href = url;
    }

    function url_join(url, url_tag) {
        let slashCount = url.split('/').length - 1;
        if (slashCount === 4) {
            url = url + url_tag;
        } else {
            url = url.slice(0, -1) + '_' + url_tag;
        }
        return url;
    }

    function redirectToUserPage() {
        {% if user.is_authenticated %}
            window.location.href = "/user";
        {% else %}
            alert("请先登录才能访问个人页面。");
            window.location.href = "/login"; // 重定向到登录页面
        {% endif %}
    }
</script>
</body>
</html>
